<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--0:引入 vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="2-todoItem.js"></script>
  </head>
  <body>
    <!--界面-->
    <div id="app">
      <todo></todo>
    </div>

    <script>
      //44444444定义组件todoItem
      var todoItem = {
        template: `
            <li>{{myi+1}}-{{mytask}} <button @click="del">X</button> </li>
            `,
        props: ["mytask", "myi", "mydel"],
        methods: {
          del() {
            this.mydel(this.myi);
          },
        },
      };

      //3333333333定义组件todoList
      var todoList = {
        template: `<div>
            <ul v-for="(task,i) of tasks" :key="i" >
                <todo-item  :mytask="task" :myi="i" :mydel="del_item"></todo-item>                
            </ul></div>`,
        components: {
          "todo-item": todoItem,
        },

        data() {
          return {
            tasks: ["吃饭", "睡觉", "学习", "打游戏"],
          };
        },

        methods: {
          add_item(str) {
            this.tasks.push(str);
          },

          del_item(i) {
            //这个方法是要传给孙子组件
            this.tasks.splice(i, 1);
          },
        },
      };
      //2222222222定义组件todoAdd
      var todoAdd = {
        template: `<div> 
                <input type="text"  v-model="item"  ref="input"> <button @click="add">+</button>
            </div>`,
        data() {
          return {
            item: "",
          };
        },

        methods: {
          add() {            
            //console.log(this.$parent.$refs.todoList);
            this.$parent.$refs.todoList.add_item(this.item);
            //this.$refs.input.fouse()
          },
        },
      };
      //11111111定义组件todo，并注册,这种注册时全局注册
      Vue.component("todo", {
        template: `<div>
            <h1>待办事项列表</h1>
            <todo-add ></todo-add>
            <todo-list ref="todoList"></todo-list>
            </div>`,
        //注册组件，时局部注册
        components: {
          "todo-add": todoAdd,
          "todo-list": todoList,
        },
      });

      var vm = new Vue({
        //界面
        el: "#app",
        //数据
        data: {},
        //方法
        methods: {},
      });
    </script>
  </body>
</html>
